<template>
    <van-row gutter="20" class="header">
        <van-col span="3" class="lefticon">
            <van-icon name="wap-nav" color="#f7f8fa" size="30px" />
        </van-col>
        <van-col span="21">
            <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" background="#ff5454" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">
                        <van-icon name="user" size="26" color="#f7f8fa" />
                    </div>
                </template>
            </van-search>
        </van-col>
    </van-row>
    <!--商品的轮播图-->
    <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" height="200px" width="100%" />
        </van-swipe-item>
    </van-swipe>
    <!--通知消息栏-->
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    <!--内容导航-->
    <van-grid :column-num="5" icon-size="35px" :border=false>
        <van-grid-item v-for="item in hotCategory" :key="item.title" :icon="item.img" :text="item.title" />
    </van-grid>
    <div class="content">
        <van-row>
            <van-col span="8">
                <div class="ms" style=" background-color:#8a2307; width:100%; height:100px; border-radius:20px;">
                    <p>华杉秒杀 <br>
                        <em>限时抢购中。。。</em>
                    </p>
                    <van-icon name="fire-o" color="#ee0a24" />
                    <van-icon name="fire-o" color="#ee0a24" />
                    <van-icon name="fire-o" color="#ee0a24" />
                    <van-icon name="fire-o" color="#ee0a24" />
                </div>
            </van-col>
            <van-col span="16">
                <div style=" background-color:#dfdcdb; width:100%; height:100px;">
                    <van-grid :column-num="4" :border=false :gutter="1" icon-size="35px">
                        <van-grid-item v-for="item in productCate" :key="item.img" :icon="item.img" :text="item.price"
                            style="margin-top:3px" />
                    </van-grid>

                </div>
            </van-col>
        </van-row>
    </div>
    <!--商品展示-->
    <van-grid :border="false" :column-num="2" icon-size="60px" style="margin-bottom: 40px;">
        <van-grid-item v-for="item in productDail2" :to="{name: 'moveproductdetil', query: { id: item.id } }">
            <van-image :src="item.img" />
            <text class="texts" style="color: rgb(23, 22, 22); font-weight: 700; margin-left: -60px;">{{ item.name }}</text>
            <!-- <p style="color: red;">￥1698</p> -->

            <em class="goods_price-int" style="color: red; margin-left: -100px;"> ¥{{ item.price }}</em>
            <div class="goods-tags__item goods-tags__item--2021" style="color: #ff2078;">
                <img class="goods-tags__item--icon"
                    src="https://img12.360buyimg.com/img/s24x24_jfs/t1/99811/34/18036/1287/5e8dbca2E63de76d4/588b8392ae283444.png"
                    style="width: 0.6rem; height: 0.6rem; float: left; ">
                <span style="padding-left: 10px;">90天最低价</span>
            </div>
        </van-grid-item>
    </van-grid>


    <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="cluster-o" :to="{name:'moveCategory'}">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" :to="{ name: 'home' }">个人中心</van-tabbar-item>
    </van-tabbar>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { ProductApi } from '@/api';
const active = ref(0);
const keyword = ref('')
const onSearch = (val: any) => {
    console.log(val);

};
const onClickButton = () => {
    console.log(keyword.value);

};

const productDail = ref([])

onMounted(() => { 
    ProductCall();
})

const productDail2=ref([])

const ProductCall = () => { 
    ProductApi.select.call().then((res: any) => { 
        console.log(res);
       // images.value=res[0].img
        productDail.value = res
        productDail2.value = productDail.value.slice(2, 10)
        productCate.value=res
    })
}

const images = ref([
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
]);

const hotCategory = ref([
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png', title: '华杉超市' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/149144/13/37547/3299/64b11027F86659ec1/fade439ac90544b7.png', title: '华杉电器' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/195186/28/35854/3469/64d4a1e5Fe388886e/3c6f65ecd0aba98b.png', title: '集美美妆' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png', title: '充值中心' },
    { img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/208529/13/35972/4081/6497ee53F4f8d38d9/c5267cb385f923fe.png', title: '华杉会员' },

])
const productCate = ref([
    { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/146864/27/39923/45678/64cdaec1Fe3317314/519954299e39e4f8.jpg', price: '￥188' },
    { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/229355/7/20841/171176/6673fac2F68f45b9e/1188afc5dbdfb2ed.jpg', price: '￥188' },
    { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/146864/27/39923/45678/64cdaec1Fe3317314/519954299e39e4f8.jpg', price: '￥188' },
    { img: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/229355/7/20841/171176/6673fac2F68f45b9e/1188afc5dbdfb2ed.jpg', price: '￥188' }
])






</script>
<style scoped>
.header {
    background-color: #ff5454;
}

.van-search__content {
    border-radius: 15px
}

.lefticon .van-icon {
    margin: 15px
}

.content {
    width: 315px;
    height: 100px;
    background: rgb(235, 217, 217);
    border-radius: 20px;
    /* padding:20px */
    margin-left: 7px;
    margin-right: 2px;

}

.goods-tags__item {
    color: #ff2078;
    font-size: 12px;
    margin-left: -60px;
}

.van-col .ms p {
    text-align: center;
    line-height: 24px;
    background: linear-gradient(rgb(243, 246, 249)rgb(123, 123, 6));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 13px;
}
</style>
<style>
.van-grid-item__text {
    color: red;
    font-size: 12px;
}

.van-grid-item__content  .texts{
    overflow: hidden;
    text-overflow: ellipsis; /**省略号 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>